Day15 【牙起來】 環境安裝 第一支程式 - Typescript

因為寫Angular總是逃離不了程式語言
接下來要介紹Angular框架的最大主角 -- Typescript

什麼是TypeScript

Javascript 雖然好寫（說不好寫怕得罪一些人）
但當開發的專案大到一定規模時，弱型別是一件讓人頭疼的事情
後面的人接手、維護起來相當不容易

所以後來出現了有型別的 型別控、型別魔人 --Typescript
誕生於2012年，是一個相對嶄新的程式語言，由微軟爸爸進行開發及維護

簡而言之，Typescript 是一個有型別、需要編譯步驟的 Javascript

• Javascript 是直譯式語言，弱型別
• Typescript 是編譯式語言，所以需要Compile，強型別

編譯這行為，是讓.ts檔案產出一個語意完全相同的.js檔

另外，因為Javascript 也有分版本 ex: ES5、ES6(ES2015)...
而Typescript還可以指定產出成哪一個版本的JS語法

就像我寫文言文，口譯人員將之翻譯（編譯）成白話文說出來
然後我還能指定，要口譯人員翻譯成夾雜民國70年代、或是80年代流行梗的白話文

開始一個Typescript專案

建立一個新資料夾，在裡面新增 main.ts 檔案

因為待會要用到 tsc 指令
來將.ts檔案由Typescript編譯成Javascript

現在還沒有 tsc 指令，所以要先執行以下安裝

安裝Typescript

安裝方式分成 全域Global、專案內Local

全域 Global

> npm install -g typescript

專案內 Local

> npm install typescript

進入此專案路徑底下，就會使用到 node_modules

這是Local的安裝
會新增

• package.json
• package-lock.json
• node_modules 包，底下能看的到typescript的套件檔案
  

安裝完後便能使用 tsc 指令了

第一支 Typescript 程式

寫上我們之前使用過的語法

let a = 10;
console.log(a);

每次修改完畢之後，都要下這行指令，讓.ts編譯成.js檔案

> tsc main.ts

會生出一個main.js檔案

點開來看，已經被轉成Javascript的語法

執行js檔案

編譯好成Javascript之後
運行時，透過node指令來執行.js檔案

> node main.js

tsconfig.json

執行以下指令進行初始設定

> tsc --init

會產生一個 tsconfig.json 的檔案
裡面 compilerOptions 底下有各項參數可調整

產生不同版本的JS

其中 target 可替換成任意版本的Javascript

看到這裡，恭喜你已經完成12%的Typescript